레거시를 더 나은 환경으로 만들기

더 나은 환경을 위한 몸부림

jest -> @swc/jest

• 환경
  • 22년쯤 create react app로 생성된 프로젝트
• ts -> js 트랜스파일링을 swc/jest를 통해 빠르게 진행하는 것 만으로도 시간을 많이 아낄 수 있었다.
  • 적용 전
    • 2~3분
  • 적용 후
    • 23.596초

순서

• jest.config.js 설정을 바꿔준다.
  • ts-jest -> @swc/jest로 바꾸고 설정도 같이 수정
  • jest.setup.js -> ts파일 확장자로 변경
    • throws spurious error on test files: @testing-library/react' should be listed in the project's dependencies, not devDependencies. · Issue #2376 · airbnb/javascript · GitHub
• create-react-app 에 적용하기
  • config 파일을 생성하고 설정한다.
  • 기존에 scripts에 react-scripts로 실행하던걸 jest로 변경한다.
    • --passWithNoTests 로 테스트 파일이 없을 때도 통과하도록 수정한다.
• 관련링크
  • "Must use import to load ES Module" error within a CommonJS project when using pure ESM dependencies · Issue #102 · swc-project/jest · GitHub
  • @swc-node/jest ReferenceError: React is not defined · Issue #635 · swc-project/swc-node · GitHub
  • jsx runtime with @swc/jest · Issue #70 · swc-project/jest · GitHub
  • @swc/jest incompatible with arrays in .swcrc · Issue #115 · swc-project/jest · GitHub
  • Configuring SWC – SWC
  • Decorators on methods in object literals · Issue #3062 · swc-project/swc · GitHub
  • @swc/jest – SWC
  • Unit test runs very slow (6 sec per a test) · Issue #259 · kulshekhar/ts-jest · GitHub

CRA에서 vite로 마이그레이션

vite로 된 프로젝트를 수정하다가 CRA로 된 프로젝트 수정하니까 속 터져서 시도하게됨. 처음에는 프로젝트를 그대로 둔채로 vite 설치 후 환경설정하려 했는데 실패함. 그냥 폴더를 하나 새로 만든 다음, 파일을 옮기는게 훨씬 쉽다.

순서

• 패키지 추가
  • pnpm create package vite-admin
• vite 새로 만들기
  • pnpm create vite new-admin --template react-ts
• process.env를 import.meta.env로 변경하기
• REACT_APP_를 VITE_로 변경하기
• 엔트리 포인트 변경하기
  • index.tsx -> main.ts
• 파비콘 변경
• 배포 파이프 라인 수정
  • 개발서버, 운영서버에 해당하는 코드를 잘 수정하자.
  • 랠릿의 경우 개발서버에 배포하고 싶으면 env.MODE 를 deploy로 강제 설정해주면된다. (근데 이러면 PR 생성해도 배포됨)
  • 소스맵을 업로드 중이라면 소스맵의 생성 위치 파악 필요
• monorepo를 사용중이라면, workspace를 먼저 물리적으로 삭제하지말고 pnpm remove {{워크스페이스 명}}으로 지울 것
• baseUrl 설정
  • 현재 배포 환경에 맞춰 baseUrl을 설정해주지 않으면 js, css 에셋 파일을 로드할 때 예상하지 못한 경로로 파일을 불러오게 됨.

프로젝트 실행시간 뿐만 아니라, 빌드시간도 줄어들어서 배포시간도 같이 줄어들었다.